<template>
	<view class="w-100">
		<view class="flex-1 mt-3 mx-3">
			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
		</view>
		<template v-if="!loadingState">
			<view class="flex-1 row" style="height: 500px;">
				<image :src="loadingImg" style="width: 100rpx;height: 100rpx;" mode=""></image>
			</view>
		</template>
		<template v-else>
			<view class="flex-1 mx-3 mt-3">
				<view class="flex-1 p-3 mb-2" style="background-color: #f5f5f5;"
					v-for="(item,index) in revenueproductList" :key="index">
					<view class="flex-1 d-f">
						<view class="d-f flex-1">
							<view class="font-s-3 text-muted">商品:</view>
							<view class="flex-1 font-s-3">
								<view class="mb-1 row-ac flex-1" v-for="(item1,index1) in item.order_items"
									:key="index1">
									<view class="flex-1 in1line">{{ item1.product_name }}</view>
									<view class="mr-3" v-if="item1.spec !== '' && item1.spec !== null"><text
											class="text-muted">规格:</text>{{ item1.spec }}</view>
									<view><text class="text-muted">单数:</text>{{ item1.quantity }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="mt-1 row-ac">
						<view class="flex-1 row-ac font-s-3">
							<view class="text-muted">报单用户:</view>
							<view class="ml-1 in1line">{{ item.order_nickname }}</view>
						</view>
						<view class="flex-1 row-ac font-s-3">
							<view class="text-muted">订单金额:</view>
							<view class="ml-1">{{ item.order_amount }}</view>
						</view>
					</view>
					<view class="mt-1 row-ac">
						<view class="flex-1 row-ac font-s-3">
							<view class="text-muted">收到金额:</view>
							<view class="ml-1 text-main-color">{{ item.received_amount }}</view>
						</view>
						<view class="flex-1 row-ac font-s-3">
							<view class="text-muted">利润:</view>
							<view class="ml-1 text-main-color">{{ item.personal_profit }}</view>
						</view>
					</view>
					<view class="mt-1 row-ac">
						<view class="flex-1 row-ac font-s-3">
							<view class="text-muted">所属分公司:</view>
							<view class="ml-1">{{ item.branch_user_nickname }}</view>
						</view>
					</view>
					<view class="flex-1 mt-1 row-ac">
						<view class="font-s-3 text-muted"><text>订单号：</text>{{ item.order_number }}</view>
					</view>
					<view class="flex-1 mt-1 row-ac">
						<view class="font-s-3 text-muted"><text>创建时间：</text>{{ item.create_time }}</view>
					</view>
				</view>
			</view>
		</template>
	</view>

</template>

<script>
	import {
		revenueproductListUrl
	} from '@/api/index.js'
	export default {
		data() {
			return {
				loadingState: false,
				queryInfo: {
					start_time: '',
					end_time: '',
					page: 1,
					page_size: 25
				},
				revenueproductList: [],
				datetimerange: [],
			};
		},
		mounted() {
			const now = new Date();
			this.queryInfo.start_time = this.formatDate(now, 'start');
			this.queryInfo.end_time = this.formatDate(now, 'end');
			this.datetimerange = [this.queryInfo.start_time, this.queryInfo.end_time];
			this.getRevenueproductList();
		},

		watch: {
			datetimerange(newval) {
				if (newval.length === 2) {
					this.queryInfo.start_time = this.formatDate(new Date(newval[0]), 'start');
					this.queryInfo.end_time = this.formatDate(new Date(newval[1]), 'end');
					this.getRevenueproductList();
				}
			},
		},
		methods: {
			formatDate(date, type) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(date.getDate()).padStart(2, '0');
				let hours, minutes, seconds;

				if (type === 'start') {
					hours = '00';
					minutes = '00';
					seconds = '00';
				} else if (type === 'end') {
					hours = '23';
					minutes = '59';
					seconds = '59';
				}

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			init() {
				this.getRevenueproductList()
			},
			getRevenueproductList() {
				this.loadingState = false
				this.$R.get(revenueproductListUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.revenueproductList = res.data.list
						this.revenueproductTotal = res.data.total
						this.loadingState = true;
						console.log(this.revenueproductList);
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	.example-body {
		background-color: #fff;
		padding: 10px;
	}
</style>